<template>
  <div class="consignPymtRecord">
    <!-- 查询条件 -->
    <el-form :model="thequery" ref="thequery" size="mini" style="margin: 0 0 20px 10px">
      <div style="display: flex">
        <!-- <el-form-item label="订单状态：" style="display: flex; margin: 0 20px 0 0">
          <el-checkbox-group v-model="thequery.stateList">
              <el-checkbox label="toBeOrdered" name="type">待定</el-checkbox>
              <el-checkbox label="booking" name="type">预定</el-checkbox>
              <el-checkbox label="selfIssued" name="type">自出票</el-checkbox>
              <el-checkbox label="outTicket" name="type">外出票</el-checkbox>
              <el-checkbox label="transferForeman" name="type">转领班</el-checkbox>
              <el-checkbox label="dispatch" name="type">派单</el-checkbox>
              <el-checkbox label="finish" name="type">完成</el-checkbox>
              <el-checkbox label="cancel" name="type">取消</el-checkbox>
            </el-checkbox-group>
        </el-form-item> -->
        <!-- <el-form-item style="display: flex; margin: 0 20px 0 0">
           <el-checkbox-group v-model="thequery.states">
              <el-checkbox label="refund" name="type">退</el-checkbox>
              <el-checkbox label="change" name="type">改签</el-checkbox>
            </el-checkbox-group>
         </el-form-item> -->
        <el-form-item label="部门" style="display:flex">
          <el-select v-model="thequery.dept" filterable placeholder="请选择" clearable>
            <el-option v-for="(item,index) in querySearch" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div style="display: flex; margin: 10px 0 0 75%">
        <el-form-item style="margin: 0 20px 0 50px">
          <el-button type="primary" size="mini" @click="searchairPort">查询</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表格 -->
    <el-table :header-cell-style="{ color: '#fff', background: '#6090EC', fontSize: '11px', fontWeight: 'normal',}"
      :data="auxiliary" size="mini" border stripe>
      <el-table-column label="订单号" prop="orderNum" width="160"></el-table-column>
      <el-table-column label="订单生成时间" prop="createTime"></el-table-column>
      <!-- <el-table-columnlabel="配单时间" prop="airportEname" ></el-table-columnlabel> -->
      <!-- <el-table-column label="票量" width="80" prop="airportCityPinyin" ></el-table-column> -->
      <el-table-column label="支付金额" width="100" prop="payAmount"></el-table-column>
      <el-table-column label="支付类型" width="140" prop="payType">
        <template slot-scope="scope">
          <template v-if="scope.row.payType=='voice'">语音</template>
          <template v-if="scope.row.payType=='unionPayQR'">银联二维码</template>
          <template v-if="scope.row.payType=='creditcard'">信用卡</template>
          <template v-if="scope.row.payType=='debitcard'">储蓄卡</template>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="140" prop="status">
        <template slot-scope="scope">
          <template v-if="scope.row.status=='false'">失败</template>
          <template v-if="scope.row.status=='true'">成功</template>
          <!-- <template v-if="scope.row.status=='selfIssued'">自出票</template>
          <template v-if="scope.row.status=='outTicket'">外出票</template>
          <template v-if="scope.row.status=='transferForeman'">转领班</template>
          <template v-if="scope.row.status=='dispatch'">派单</template>
          <template v-if="scope.row.status=='finish'">完成</template>
          <template v-if="scope.row.status=='finish'">取消</template>
          <template v-if="scope.row.status=='refund'">退</template>
          <template v-if="scope.row.status=='change'">改签</template> -->
        </template>
      </el-table-column>
      <el-table-column label="部门" width="80" prop="deptName"></el-table-column>
      <el-table-column label="航班号" width="80" prop="flightNum"></el-table-column>
      <el-table-column label="起飞时间" prop="departureTime"></el-table-column>
      <el-table-column label="退改签" width="80px" prop="cancellationAndChange"></el-table-column>
      <el-table-column label="支付状态" width="80px" prop="guestPymtStsId">
      </el-table-column>
      <!-- <el-table-column  label="回填票号" width="200">
              <template slot-scope="scope">
                <el-input  type="textarea" v-model="scope.row.backfillticketNum" :rows="1" size="mini"></el-input>
              </template>
        </el-table-column> -->
      <!-- <el-table-column  label="回填票号" width="80">
        <template slot-scope="scope">
          <el-popconfirm title="确认回填票号吗" @confirm="backfillconfirm">
              <el-button slot="reference"  type="primary" size="mini" @click="reconciliation(scope.row)">回填</el-button>
          </el-popconfirm>  
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="出票合作商" width="150px" prop="endTime"></el-table-column> -->
      <!-- <el-table-column label="收款合作商" width="150px" prop="endTime"></el-table-column> -->
      <el-table-column label="修改支付方式" width="110" prop="employee">
        <template slot-scope="scope">
          <el-button type="primary" @click="modifyairPort(scope.row)" size="mini">修改</el-button>
        </template> 
      </el-table-column>
      <el-table-column label="处理订单" width="110" prop="employee">
        <template slot-scope="scope">         
          <el-button type="primary" @click="dealwithorder(scope.row)" size="mini">处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "consignPymtRecord",
    data() {
      return {
        // id
        flightOrderInfoTicketsId: 0,
        // 回填票号
        backfillticketNum: "",
        //分页
        total: 0,
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
        payway: false,
        // 部门数据
        querySearch: [],
        // 查询条件
        thequery: {
          stateList: [],
          states: [],
          dept: ""
        },
        // 表格数据
        auxiliary: [],
      };
    },
    methods: {
      reconciliation(row) {
        console.log(row)
        // this.flightOrderInfoTicketsId=row.flightOrderInfoTicketsId
        this.$axios.getflightOrderIdListorderId({
          orderId: row.orderNum
        }).then((res) => {
          console.log(res)
          this.flightOrderInfoTicketsId = res.data[0]
        })
      },
      // 回填确定回调
      backfillconfirm() {
        this.getbackfillTicketNumber()
      },
      // 回填单号
      getbackfillTicketNumber() {
        for (let i = 0; i < this.auxiliary.length; i++) {
          this.backfillticketNum = this.auxiliary[i].backfillticketNum
        }
        this.$axios.getbackfillTicketNumber({
          id: this.flightOrderInfoTicketsId,
          remark: '',
          ticketNum: this.backfillticketNum
        }).then((res) => {
          console.log(res)
          if (res.code == '200') {
            this.$message({
              message: '回填成功',
              type: 'success'
            });
          }
        })
      },
      // 列表
      getflightOrderInfoList() {
        localStorage.removeItem("pageNum");
        localStorage.removeItem("pageSize");
        this.$axios.getflightOrderInfoList({
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          // 订单状态
          stateList: this.thequery.stateList,
          // 订单状态
          states: this.thequery.states,
          dept: this.thequery.dept
        }).then((res) => {
          localStorage.setItem("pageSize", 10);
          localStorage.setItem("pageNum", 1);
          console.log(res)
          if (res.code == '200') {
            this.auxiliary = res.data.flightOrderInfoList
            this.pageTotal = res.data.total
          }
        })
      },
      // 查询列表数据
      searchairPort() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getflightOrderInfoList()
      },
      // 订单处理
      dealwithorder(row) {
        console.log(row)
        this.$router.push({
          name: "flightorderdispose",
          params: {
            orderId: row.orderNum
          }
        })
      },
      // 订单修改
      modifyorder() {},
      // 支付方式修改
      modifyairPort(row) {
        this.$router.push({
          name: "flightPaymodify",
          params: {
            orderId: row.orderNum
          }
        })
      },
      // 部门
      geteedepartmentlist() {
        this.$axios.geteedepartmentlist({}).then((res) => {
          console.log(res)
          if (res.code == '200') {
            let list = JSON.parse(JSON.stringify(res.data));
            this.querySearch = list.map((item) => {
              return {
                label: item.deptName,
                value: item.deptId
              };
            });
            console.log(this.querySearch);
          }
        })
      },
      //分页sdrgs
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getflightOrderInfoList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.currentPage = value
        this.getflightOrderInfoList();
        // orders = res.data;
      },
      search() {
        localStorage.setItem("pageNum", this.currentPage);
        localStorage.setItem("pageSize", 10);
        this.getflightOrderInfoList();
      },
    },
    mounted() {
      // 部门
      this.geteedepartmentlist()
      // 列表
      this.getflightOrderInfoList()
    },
  };
</script>

<style scoped>
  .consignPymtRecord {
    margin: 20px;
  }
</style>